<template>
	<view class="goods-list" :class="themeStyle" :style="{ backgroundColor: value.backgroundColor, padding: value.paddingUpDown * 2 + 'rpx 0' }">
		<ns-goods-item-row :value="goodsList" @toDetail="toDetail" :showInfor="value"></ns-goods-item-row>
		<view @click="getGoodsList()" v-if="isLoadAllData == false" class="load-more"><view class="btn">{{$lang(isLoading ? 'loading' : 'loadMore')}}</view></view>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	import nsGoodsItemRow from "@/components/ns-goods-item/ns-goods-item-row.vue";
	// 鍟嗗搧鍒楄〃
	export default {
		name: 'diy-newuser-coupon-goods-list',
		components:{
			nsGoodsItemRow
		},
		props: {
			value: {
				type: Object,
				default: () => {
					return {};
				}
			},
			siteId: {
				type: [Number, String],
				default: 0
			},
			//引用组件页面
			root:{
				type:String,
			},
		},
		mixins:[globalConfig],
		data() {
			return {
				goodsList: [],
				page:1,
				pageSize:20,
				isLoadAllData:false,//是否需要加载数据
				isLoading:false,//是否正在加载中
			};
		},
		computed: {
			Development() {
				return this.$store.state.Development
			},
			addonIsExit(){
				return this.$store.state.addonIsExit
			} 
		},
		created() {
			let that = this;
			that.getGoodsList();
		},
		methods: {
			getGoodsList() {
				if(this.isLoadAllData == true){
					return;
				}
				if(this.isLoading == true){
					return;
				}
				this.isLoading = true;
				var data = {
					page: this.page,
					page_size: this.pageSize,
					site_id: this.siteId
				};
				if (this.value.sources == 'category') {
					data.category_id = this.value.categoryId;
					if(this.value.twoCategoryId != "") {
						data.category_id = this.value.twoCategoryId;
					}
				}
				if (this.value.sources == 'diy') {
					data.goods_id_arr = this.value.goodsId.join(',');
				}
				this.$api.sendRequest({
					url: '/newusercoupon/api/goodssku/page',
					data: data,
					success: res => {
						this.isLoading = false;
						if (res.code == 0) {
							let data = res.data;
							if(this.value.goodsCount != 0){
								if(this.goodsList.length + data.list.length >= this.value.goodsCount){
									this.goodsList.length + data.list.length >= this.value.goodsCount
									this.isLoadAllData = true;
									let goodsList = this.goodsList.concat(data.list);
									this.goodsList = goodsList.slice(0, this.value.goodsCount);
									return;
								}
							}
							if(data.list.length < this.pageSize){
								this.isLoadAllData = true;
								let goodsList = this.goodsList.concat(data.list);
								this.goodsList = this.goodsList.concat(data.list);
								return;
							}
							this.goodsList = this.goodsList.concat(data.list);
							this.page ++;
						}
					}
				});
			},
			toDetail(item) {
				this.$util.redirectTo('/pages/goods/detail/detail', {
					sku_id: item.sku_id
				});
			},
			imageError(index) {
				this.goodsList[index].sku_image = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			}
		},
	};
	
</script>

<style lang="scss">
	.load-more{
		background-color: #fff;
		text-align: center;
		padding:4rpx 0 20rpx;
		.btn{
			display: inline-block;
			border: 1px solid #ccc;
			padding:4rpx 32rpx;
			font-size: 28rpx;
			border-radius: 6rpx;
		}
	}
</style>
